<template>
    <div class="work-familyaccount">
        <div class="operate">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-input v-model="formInline.user" placeholder="请输入事件名称"></el-input>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="text" @click=" addAccouny = true">添加</el-button>
                    <el-button type="text" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="level" label="事件等级">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.level === '即将发生' ? 'danger' : 'warning'" disable-transitions>{{
                            scope.row.level }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="eventname" label="事件名称">
                </el-table-column>
                <el-table-column prop="content" label="事件内容">
                </el-table-column>
                <el-table-column prop="address" label="地点">
                    <template slot-scope="scope">
                        <el-tag :type="''" @click="setaddress(scope.row.address,scope.row.id)" style="cursor: pointer;" disable-transitions><span @click="setaddress(scope.row.address,scope.row.id)" >{{scope.row.address}}</span></el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="参与人">
                </el-table-column>
                <el-table-column prop="date" label="事件时间">
                </el-table-column>
                <el-table-column prop="distance" label="距离发生">
                    <template slot-scope="scope">还有
                        <span style="color: red;font-size: 20px;">{{ scope.row.distance }}</span> 天
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" class="button-edit"
                            @click="editAccount(scope.row)">修改</el-button>
                        <el-button type="text" size="small" slot="reference" class="button-del"
                            @click="btnDel(scope.row.id)">删除</el-button>
                        <el-button type="text" size="small" slot="reference" class="button-top"
                            @click="btnTop(scope.row,scope.$index)" :disabled="scope.$index==0">置顶</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[5, 8, 10]" :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
                </el-pagination>
            </div>
            <!-- 添加事件弹框 -->
            <el-dialog title="添加事件" :visible.sync="addAccouny">
                <el-form :model="form">
                    <el-form-item label="事件名称：" :label-width="formLabelWidth">
                        <el-input v-model="form.eventname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="事件内容：" :label-width="formLabelWidth">
                        <el-input v-model="form.content" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地点：" :label-width="formLabelWidth">
                        <el-input v-model="form.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="参与人：" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="事件时间：" :label-width="formLabelWidth">
                        <el-input v-model="form.date" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addAccouny = false">取 消</el-button>
                    <el-button type="primary" @click="addNotepad()">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 修改事件弹框 -->
            <el-dialog title="修改事件" :visible.sync="editAccount1">
                <el-form :model="form2">
                    <el-form-item label="事件名称：" :label-width="formLabelWidth">
                        <el-input v-model="form2.eventname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="事件内容：" :label-width="formLabelWidth">
                        <el-input v-model="form2.content" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地点：" :label-width="formLabelWidth">
                        <el-input v-model="form2.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="参与人：" :label-width="formLabelWidth">
                        <el-input v-model="form2.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="事件时间：" :label-width="formLabelWidth">
                        <el-input v-model="form2.date" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editAccount1 = false">取 消</el-button>
                    <el-button type="primary" @click="editNotepad()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            tableData: [
                {
                    level: ''
                }
            ],
            totalData: [],
            formInline: {
                user: '',
                region: ''
            },
            dialogFormVisible: false,
            dialogTableVisible: false,
            addAccouny: false,
            editAccount1: false,
            activeName: 'first',
            check: false,
            systemTime: "",
            days: '',
            page: 1,
            limit: 5,
            totalPage:5,
            form: {
                id: "",
                level: '',
                eventname: '',
                content: '',
                address: "",
                name: "",
                date: '2023-07-09',
                days:3,
            },
            form2: {
                id: "",
                level: '',
                eventname: '',
                content: '',
                address: "",
                name: "tzw",
                date: '2023-07-09',
                days:3,
            },
            formLabelWidth: '100px',
            currentPage4: 1
        };

    },
    methods: {
        nowdata(date111) {
            let nowDate = new Date()
            let date2 = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate()
            }
            this.systemTime = date2.year + '-' + date2.month + '-' + date2.date
            let date1Str = date111.split("-");
            let date1Obj = new Date(date1Str[0], (date1Str[1] - 1), date1Str[2]);
            let date2Str = this.systemTime.split("-");
            let date2Obj = new Date(date2Str[0], (date2Str[1] - 1), date2Str[2]);
            let t1 = date1Obj.getTime();
            let t2 = date2Obj.getTime();
            let dateTime = 1000 * 60 * 60 * 24;//每一天的毫秒数
            let minusDays = Math.floor(((t2 - t1) / dateTime));//计算出两个日期的天数差
            this.days = Math.abs(minusDays);//取绝对值
        },
        handleClick(tab, event) {
        },
        editAccount(row) {
            this.editAccount1 = true
            this.form2.id = row.id
            axios({
                url: "/dbdata/notepad/" + this.form2.id,
            }).then(({data}) => {
                this.form2.eventname=data.eventname;
                this.form2.content=data.content;
                this.form2.address=data.address;
                this.form2.name=data.name;
                this.form2.date=data.date;
                this.form2.days=this.nowdata(this.form2.date)
            })
        },
        onSubmit() {
            let a=this.formInline.user;
            if(a==''){
                return this.$message.error('错了哦，输入事件名称不能为空');
            }else{
            axios({
                url: "/dbdata/notepad?eventname="+a,
            }).then((res) => {
                this.totalData = res.data;
                this.tableData = this.totalData.slice((this.currentPage4 - 1) * this.limit, this.currentPage4 * this.limit)
                this.tableData.forEach((v, i) => {
                    this.nowdata(v.date);
                    v.distance = this.days;
                    if (this.days < 5) {
                        v.level = "即将发生"
                    } else {
                        v.level = "正在准备"
                    }
                })
            });
            this.formInline.user=""
        }
        },
        handleSizeChange(val) {
            this.limit = val
            this.tableData = this.totalData.slice(0, this.limit)
        },
        handleCurrentChange(val) {
            this.currentPage4=val
            this.tableData = this.totalData.slice((this.currentPage4 - 1) * this.limit, this.currentPage4 * this.limit);
            this.tableData.forEach((v, i) => {
                    this.nowdata(v.date);
                    v.distance = this.days;
                    if (this.days < 5) {
                        v.level = "即将发生"
                    } else {
                        v.level = "正在准备"
                    }
                })
        },
        addNotepad() {
            this.addAccouny = false;
            this.form.days=this.nowdata(this.form.date)
            axios({
                url: "/dbdata/notepad",
                method: 'post',
                data: this.form

            }).then((res) => {
                this.$message.success('添加成功');
                this.render()
            })
        },
        render() {
            axios({
                url: "/dbdata/notepad?_sort=days&_order=asc",
            }).then((res) => {
                this.totalData = res.data;
                this.totalPage=this.totalData.length
                this.tableData = this.totalData.slice((this.currentPage4 - 1) * this.limit, this.currentPage4 * this.limit)
                this.tableData.forEach((v, i) => {
                    this.nowdata(v.date);
                    v.distance = this.days;
                    if (this.days < 5) {
                        v.level = "即将发生"
                    } else {
                        v.level = "正在准备"
                    }
                })
            })
        },
        btnDel(v) {
            let str = "/dbdata/notepad/" + v
            axios({
                url: str,
                method: "delete"
            }).then((res) => {
                if( Math.ceil((this.totalPage / this.limit)!==this.currentPage4)){
                    this.currentPage4--
                }
                this.$message.error('删除成功');
                this.render()
            })
            // this.fix()
        },
        editNotepad() {
            this.editAccount1 = false;
            let str = "/dbdata/notepad/" + this.form2.id
            axios({
                url: str,
                method: "patch",
                data: this.form2
            }).then((res) => {
                this.$message.success('修改成功');
                this.render()
            })

        },
        btnTop(row,index) {
            let str = "/dbdata/notepad/" + row.id;
            let arr=[];
            let arr2=[]
            this.tableData.forEach((v)=>{
                arr2.push(v.days);
            })
            let daymin=Math.min(...arr2);
            this.tableData.forEach((v,i)=>{
                if(v.id==row.id){
                    v.days=daymin-1
                    arr.push(v)
                }
            })
            let json={}
            json=arr[0]
             this.tableData.days=daymin-1
            axios({
                url: str,
                method: "patch",
                data: json
            }).then((res) => {
                this.$message.success('置顶成功');
                this.render()
            })
            // this.tableData.splice(index,1);
            // this.tableData.unshift(row);
        },
        reset(){
            this.handleCurrentChange(1);
            this.render()
        },
        setaddress(addres,id){
            sessionStorage.setItem("setaddres", JSON.stringify(addres));
            sessionStorage.setItem("setaddresId", String);
            document.querySelector('.Navigator').click()
        }
    },
    mounted() {
        this.render()
    },
}

</script>

<style lang="less">
@wid: 100px;
@b-col: rgb(255, 233, 192);
@col: rgba(00, 00, 00, 0.8);
@bo-col: rgb(255, 233, 192);

.work-familyaccount {
    .lwy-back {
        text-align: left;
        margin-left: 5px;
        margin-top: 20px;

        a:-webkit-any-link {
            color: rgba(00, 00, 00, 0.67);
            text-decoration: none;

            .el-icon-arrow-left {
                margin-right: 5px;
            }
        }

    }

    .operate {
        margin-top: 20px;


        .el-form {
            text-align: left;
            margin-left: 40px;

            .el-input {
                width: 200px;
                margin-right: 20px;
            }

            .el-button--primary {
                width: @wid;
                background-color: @b-col;
                color: @col;
                border-color: @bo-col;

                &:hover {
                    background-color: rgba(255, 233, 192, 0.8);
                    color: rgba(00, 00, 00, 0.5);
                    border-color: rgba(255, 233, 192, 0.8);
                }
            }

            .el-button--text {
                width: @wid;
                background-color: @b-col;
                color: @col;
                border-color: @bo-col;

                a:-webkit-any-link {
                    color: @col;
                    text-decoration: none;

                    .el-icon-arrow-left {
                        margin-right: 5px;
                    }
                }

                &:hover {
                    background-color: rgba(255, 233, 192, 0.8);
                    color: rgba(00, 00, 00, 0.5);
                    border-color: rgba(255, 233, 192, 0.8);
                }
            }
        }


        .el-table {
            width: 95% !important;
            margin-left: 35px;
            margin-top: 20px;
            border-radius: 0.5em;

            .el-table__cell {
                text-align: center;

                .danger {
                    background-color: red;
                }
            }

            .button-edit {
                background-color: rgba(255, 255, 255, 0.0) !important;
                width: 50px !important;

            }

            .button-del {
                background-color: rgba(255, 255, 255, 0.0) !important;
                width: 50px !important;
            }
        }

        .block {
            margin-top: 30px;
            margin-left: 500px;
        }

        .el-dialog {
            width: 36%;

            .el-form {
                margin-left: 0;

                .el-form-item {
                    width: 450px;
                }
            }

        }

        .check-table {
            margin-left: 15px;
        }


    }
}
</style>